<div class="content-wrapper">
    <div nzRow class="attic">
        <div nz-col nzSpan="17">
            <!-- 待办事项 -->
            <div class="border">
                <div class="schedule">
                    <div class="backlog-wrapper">
                        <h3>待办事项</h3>
                        <div class="divide-b"></div>
                        <div class="lineRadius"></div>
                    </div>
                    <nz-skeleton [nzLoading]="loadingTask" [nzActive]="true">
                        <nz-card nzBordered="false" [nzBodyStyle]="{'padding':'10px 0 4px 0'}">
                            <div nz-card-grid [ngStyle]="gridStyle" *ngFor="let t of backlog;index as i"
                                [style.borderRight]="i == backlog.length - 1 && 'none'">
                                <span (click)="goMatters(t.tasktitle, t.menuid)" class="goMatters">
                                    <ul class="card-list">
                                        <li>{{ t.tasktitle }}</li>
                                        <li><span class="task-count">{{ t.tasksum }}</span> 件</li>
                                        <li>{{ t.tasknote }}</li>
                                    </ul>
                                </span>
                            </div>
                        </nz-card>
                        <div *ngIf="backlogNodata">
                            <nz-empty></nz-empty>
                        </div>
                    </nz-skeleton>
                </div>
            </div>

        </div>
        <div nz-col nzSpan="7">
            <!-- 用户信息 -->
            <div class="greeting">
                <nz-carousel [nzEffect]="'fade'" nzAutoPlay>
                    <div class="carouselImg" nz-carousel-content *ngFor="let index of carousel">
                        <img [src]="index">
                    </div>
                </nz-carousel>
            </div>
        </div>
    </div>
    <div nzRow class="customized clearfix">
        <div nz-col nzSpan="17" style="margin-top: 10px;">
            <!-- 常用菜单 -->
            <div class="common-use">
                <div nz-row>
                    <div class="commonWrap">
                        <i nz-icon nzType="star" nzTheme="fill"></i>
                        <span class="commonTitle">常用菜单</span>
                    </div>
                </div>
                <div nz-row>
                    <nz-card [nzBodyStyle]="commonMenuBodyStyle">
                        <ng-container *ngFor="let data of commonMenuData;index as i">
                            <div *ngIf="i < 12" nz-card-grid [ngStyle]="commonMenuStyle">
                                <div *ngIf="data.name" title="{{data.name}}" (click)="commonMenuClick(data)">
                                    {{data.rename}}</div>
                                <div class="commonMenuDel" *ngIf="data.name" title="删除" [ngStyle]="commonMenuDelStyle"
                                    (click)="commonMenuDel(data)">
                                    <i nz-icon nzType="close-circle" nzTheme="outline"></i>
                                </div>
                                <div *ngIf="data.name == ''" (click)="commonMenuAdd()">
                                    <i nz-icon nzType="plus-circle" nzTheme="outline"
                                        style="font-size:18px;color:#3fadfa"></i>
                                </div>
                            </div>
                        </ng-container>
                    </nz-card>
                </div>
            </div>
            <!-- 未读邮件 -->
            <div class="border mt10">
                <div class="schedule">
                    <div class="backlog-wrapper">
                        <h3>未读邮件</h3>
                        <div class="divide-b"></div>
                        <div class="lineRadius"></div>
                    </div>
                    <nz-table [nzData]="[{}]" [nzScroll]="lockHeadScroll" nzSize="small" nzBordered
                        [nzShowPagination]="false" class="caption-type">
                        <thead>
                            <tr style="background-color: #0196ff;">
                                <th nzWidth="50px" nzAlign="center">序号</th>
                                <th nzAlign="center">标题</th>
                                <th nzWidth="150px" nzAlign="center">日期</th>
                                <th nzWidth="200px" nzAlign="center">来源</th>
                            </tr>
                        </thead>
                    </nz-table>
                    <nz-skeleton [nzLoading]="loadingMail" [nzActive]="true">
                        <nz-table [nzData]="mailData" [nzScroll]="lockHeadScroll" nzSize="small" nzBordered
                            [nzPageSize]="'10'" [nzHideOnSinglePage]="true" #nzMailTable>
                            <tbody>
                                <tr *ngFor="let data of nzMailTable.data" [class.important-news]="data.order == 1">
                                    <td nzAlign="center">
                                        <div>{{ data.id }}</div>
                                    </td>
                                    <td>
                                        <div>{{ data.title }}</div>
                                    </td>
                                    <td>
                                        <div>{{ data.sendtime }}</div>
                                    </td>
                                    <td>
                                        <div>{{ data.senduser }}</div>
                                    </td>
                                </tr>
                            </tbody>
                        </nz-table>
                    </nz-skeleton>
                </div>
            </div>
        </div>
        <div nz-col nzSpan="7">
            <!-- 访问历史菜单 -->
            <div class="communication-record">
                <div class="record-title">
                    <h3>访问历史菜单</h3>
                    <div class="divide-b"></div>
                    <div class="lineRadius"></div>
                </div>
                <div class="list" (click)="historyMenuClick(data.link)" *ngFor="let data of historyMenuList">▸
                    {{data.text}}</div>
            </div>
        </div>
    </div>
</div>

<nz-modal [(nzVisible)]="commonMenuVisible" nzWidth="1000" nzTitle="添加常用菜单" (nzOnCancel)="commonMenuCancel()"
    (nzOnOk)="commonMenuOk()">
    <div class="commonMenuTree" style="width:calc(25% - 17px)" *ngFor="let data of treeNode;index as i">
        <nz-tree [nzData]="data.treenodes" nzCheckable="true" nzMultiple="true" [nzCheckedKeys]="defaultCheckedKeys"
            (nzExpandChange)="nzEvent($event,i)" (nzCheckBoxChange)="nzEvent($event,i)">
        </nz-tree>
    </div>
</nz-modal>